<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "e81957af756a09d273bbd8f3b20324a0",
			};
		</script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript">
			AMapLoader.load({
				key: "b1c758798e031a9dcaabf329b1816f9f", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			})
				.then((AMap) => {
					const map = new AMap.Map("container", {
						zoom: 11, //级别
						center: [104.066301, 30.572961], //中心点坐标
					});
				})
				.catch((e) => {
					console.error(e); //加载错误提示
				});
		</script>
	</head>
	<body>
		<div class="navbar">
			<!-- <a href="#">跑步</a>
				<a href="#">骑行</a>
				<a href="sports_crouse.html" class="active">课程训练</a> -->
		</div>
		<main>
			<section id="main-top">
				<p>目前累积跑步距离:</p>
				<div class="main-top-word">
					<strong id="meter">999.99</strong>
					<span>公里</span>
				</div>
			</section>
			<section id="main-middle">
				<div class="main-middle-go">GO</div>
				<div id="main-middle-next">
					<div id="container"></div>
				</div>
			</section>
		</main>
		<nav class="tabbar"></nav>
		<!-- 倒计时模态框 -->
		<div id="mask"></div>
		<div id="box">3</div>
	</body>
</html>
